<template>
   <div class="box">
     <h1 ref="title">{{msg}}</h1>
     <hr>
      <h1>计算器</h1>
      <h2 ref="numShow">{{num}}</h2>
      <button @click="num++">+</button>
      <hr>
      <h1>定时器</h1>
      <h2>{{count}}</h2>
   </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'你好',
            num:1,
            count:1
        }
    },
    props:{
        pmsg:{
            type:String
        }
    },
    methods:{
        show(){
            console.log('show方法');
        }
    },
    beforeCreate(){
       console.group('---------beforeCreate------------')
       console.log('data中的数据',this.msg);
       console.log('methods中的方法',this.show);
       //console.log('props中的数据',this.pmsg);
       console.groupEnd()
    },
    //该钩子函数主要用来向服务端获取数据
    created(){
       console.group('---------created------------')
       console.log('data中的数据',this.msg);
       console.log('methods中的方法',this.show);
       console.log('props中的数据',this.pmsg);
       console.log(this.$refs);
       this.timers=window.setInterval(()=>{
        this.count++
        console.log('定时器',this.count);
       },1000)
       /*
         1、created钩子函数中是最佳存放网络请求地方
         2、向网络发送请求有常见的有三种方式
            1）ajax
            2) fetch
            3) axios
       */
       console.groupEnd()
    },
    beforeMount(){
       console.group('---------beforeMount------------')
       console.log(this.$refs.title);
       console.groupEnd()
    },
    //该钩子函数主要用来操作DOM元素
    mounted(){
       console.group('---------mounted------------')
       console.log(this.$refs.title);
       //this.$refs.title.innerHTML=this.msg
       this.msg="Monica"
       console.groupEnd()
    },
    //在更新之前调用
    beforeUpdate(){
       /*
        这个钩子函数主要是更新数据，但没有重新渲染视图
       */
       console.group('---------beforeUpdate------------')
       console.log('数据',this.num);
       console.log('视图',this.$refs.numShow.innerText);
      
       console.groupEnd()
    },
    updated(){
       console.group('---------updated------------')
       console.log('数据',this.num);
       console.log('视图',this.$refs.numShow.innerText);
       console.groupEnd()
    },
    beforeDestroy(){
       console.group('---------beforeDestroy------------')
        //销毁定时器
       window.clearInterval(this.timers)
       console.groupEnd()
    },
    destroyed(){
       console.group('---------destroyed------------')
       console.groupEnd()
    }

}
</script>

<style>

</style>